// Add_Student_Information
// 封装 获取元素
window.onload = function () {
    function $Key(getKey) {
        return document.querySelector(getKey)
    }
    // 添加元素 ==> 点击按钮获取表单中的内容
    $Key("#add_btn").onclick = function () {
        let studentNo = $Key("#studentNo").value
        let loginPwd = $Key("#loginPwd").value
        let studentName = $Key("#studentName").value
        let sex = [...document.getElementsByName("sex")].find(a => a.checked).value
        let gradeId = $Key("#gradeId").value
        let phone = $Key("#phone").value
        let address = $Key("#address").value
        let bornDate = $Key("#bornDate").value
        let email = $Key("#email").value
        let identityCard = $Key("#identityCard").value
        // json文件 数据格式 [{ }]
        // 将获取的数据放在一个对象中 方便Ajax请求发送
        let obj = {
            studentNo,
            loginPwd,
            studentName,
            sex,
            gradeId,
            phone,
            address,
            bornDate,
            email,
            identityCard
        }
        // 将js转成JSON格式
        let jsons = JSON.stringify(obj)
        // 通过Ajax方式添加数据
        let xhr = new XMLHttpRequest()
        xhr.open("POST", "https://www.bingjs.com:8001/Student/Add ")
        // 设置请求头
        // xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
        xhr.setRequestHeader("Content-Type", "application/json")
        xhr.send(jsons)
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                let obj = JSON.parse(xhr.response)
                if (obj) {
                    alert("添加成功")
                }
            }
        }
    }
    // 表单 ==> 正则验证
    function funValue(val, reg, spans) {
        if (reg.test(val)) {
            spans.innerHTML = "输入正确"
            spans.style.color = "green"
        } else if (val === "") {
            spans.innerHTML = "内容不能为空"
            spans.style.color = "red"
        } else {
            spans.innerHTML = "输入错误,请重新输入"
            spans.style.color = "red"
        }
    }
    let stu_no_ts = document.getElementById("stu_no_ts")
    $Key("#studentNo").onfocus = function () {
        stu_no_ts.innerHTML = "学号格式：KW59_xx"
    }
    $Key("#studentNo").onblur = function () {
        let val = this.value
        let reg = /^KW59_\d{2}$/
        // ajax 获取数据传给后端
        let xhr = new XMLHttpRequest()
        /* 
            https://www.bingjs.com:8001/Student/GetStudentByNo  根据学号查询单个学生信息    [GET请求]
            (参数studentNo：学生学号，不可以为空)
        */
        xhr.open("GET", `https://www.bingjs.com:8001/Student/GetStudentByNo?studentNo=${studentNo}`)
        xhr.send()
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                funValue(val, reg, stu_no_ts)
            }
        }
    }
    // 密码正则验证
    let stu_pwd_ts = document.getElementById("stu_pwd_ts")
    $Key("#loginPwd").onfocus = function () {
        stu_pwd_ts.innerHTML = "密码由6~18位数字 字母 下划线组成"
    }
    $Key("#loginPwd").onblur = function () {
        let val = this.value
        let reg = /^\w{6,18}$/
        funValue(val, reg, stu_pwd_ts)
    }
    // 姓名正则验证
    let stu_name_ts = document.getElementById("stu_name_ts")
    $Key("#studentName").onfocus = function () {
        stu_name_ts.innerHTML = "姓名格式：由2~5个汉字组成"
    }
    $Key("#studentName").onblur = function () {
        let val = this.value
        let reg = /^[\u4E00-\u9FA5]{2,5}$/
        funValue(val, reg, stu_name_ts)
    }

    // 年级编号正则验证
    let stu_gradeId_ts = document.getElementById("stu_gradeId_ts")
    $Key("#gradeId").onfocus = function () {
        stu_gradeId_ts.innerHTML = "请下拉选择年级编号"
    }
    $Key("#gradeId").onchange = function () {
        let val = this.value
        // [^]除了某一个不要 其他都要
        // [^0]除了 0 不要 其他都可以选择
        let reg = /^[^0]$/
        funValue(val, reg, stu_gradeId_ts)
    }

    // 电话号码正则验证
    let stu_phone_ts = document.getElementById("stu_phone_ts")
    $Key("#phone").onfocus = function () {
        stu_phone_ts.innerHTML = "手机号格式：11位数字,第一位是1 第二位3-9  第三位以后 随机 9 个数"
    }
    $Key("#phone").onblur = function () {
        let val = this.value
        // [^]除了某一个不要 其他都要
        // [^0]除了 0 不要 其他都可以选择
        let reg = /^1[3-9]\d{9}$/
        funValue(val, reg, stu_phone_ts)
    }
    // 地址验证
    let stu_address_ts = document.getElementById("stu_address_ts")
    $Key("#address").onfocus = function () {
        stu_address_ts.innerHTML = "请输入地址"
    }
    $Key("#address").onblur = function () {
        let val = this.value
        let reg = /^[\u4E00-\u9FA5]{2,100}$/
        funValue(val, reg, stu_address_ts)
    }

    // 生日正则验证
    let stu_bornDate_ts = document.getElementById("stu_bornDate_ts")
    $Key("#bornDate").onfocus = function () {
        stu_bornDate_ts.innerHTML = "生日格式：xxxx-xx-xx"
    }
    $Key("#bornDate").onblur = function () {
        let val = this.value
        // [^]除了某一个不要 其他都要
        // [^0]除了 0 不要 其他都可以选择
        let reg = /^(([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8]))))|((([0-9]{2})(0[48]|[2468][048]|[13579][26])|((0[48]|[2468][048]|[3579][26])00))-02-29)$/
        funValue(val, reg, stu_bornDate_ts)
    }

    // 邮箱验证
    let stu_email_ts = document.getElementById("stu_email_ts")
    $Key("#email").onfocus = function () {
        stu_email_ts.innerHTML = "邮箱格式：xxxxxxxxx@xxx.com"
    }
    $Key("#email").onblur = function () {
        let val = this.value
        let reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
        funValue(val, reg, stu_email_ts)
    }

    // 身份证验证
    let stu_id_ts = document.getElementById("stu_id_ts")
    $Key("#identityCard").onfocus = function () {
        stu_id_ts.innerHTML = "身份证格式：18位数字，最后一位校验位可以是数字也可以是X"
    }
    $Key("#identityCard").onblur = function () {
        let val = this.value
        let reg = /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/
        funValue(val, reg, stu_id_ts)
    }
}
